<%- include('head') -%>
<body>
  <h1>首页</h1>
  <button id="btn">增加一个商品</button>
  <ul>
    <% for(var i=0;i<items.length; i++) { %>
      <li>
        <p>商品名称:<%= items[i].name %></p>
        <p>商品价格:<%= items[i].price %></p>
        <p>封面图片: <img width="100" src="<%= items[i].thumb %>" alt=""> </p>
        <button data-id="<%= items[i]._id %>" class="delItem">删除商品</button>
        <button data-id="<%= items[i]._id %>" class="updateItem">更新商品数据</button>
      </li>
    <%}%>
  </ul>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.js"></script>
  <script>
    // 新增商品
    $("#btn").click(function(){
      $.ajax({
        url: '/addItem',
        type:'post',
        data: {
          name: '商品n',
          price: 100,
          thumb: 'http://www.cgtpw.com/d/file/xgmn/2021-09-24/ce7949c6d5a8989057e0c44786268871.jpg'
        },
        success: function(res){
          if(res.code === 0) {
            alert(res.msg);
            history.go(0);
          }
        }
      })
    })
    // 删除商品
    $('.delItem').click(function(){
      // alert(this.dataset.id)
      if(confirm('您确认删除嘛?')){
        $.ajax({
          url: '/delItem',
          data: {
            _id: this.dataset.id
          },
          success: function(res){
            if(res.code === 0) {
              alert(res.msg);
              history.go(0);
            }
          }
        })
      }
    })
    $('.updateItem').click(function(){
      // alert(this.dataset.id)
      
        $.ajax({
          url: '/updateItem',
          type: 'post',
          data: {
            _id: this.dataset.id
          },
          success: function(res){
            if(res.code === 0) {
              alert(res.msg);
              history.go(0);
            }
          }
        })
      
    })
  </script>
</body>
</html>